<script setup lang="ts">
import { useRoute } from "vue-router";
import useFetch from "@/hooks/useFetch";
import Page from "@/components/app/Page.vue";
import Record from "./components/Record.vue";

const { params, query } = useRoute();
const headers = { Authorization: "Bearer " + query.token };

const { data } = useFetch("/api/finance/receipt/detail", {
    defaultParams: { receiptBillId: params.id, },
    headers,
    onAfter: (res: any) => res.receiptBill
});

const { loading, run } = useFetch("/api/v1/payment/createPay", {
    manual: true,
    method: "POST",
    headers,
    onSuccess(res) {
        window.open(res.payUrl);
    }
});

const { data: listData } = useFetch("/api/finance/receipt/list", {
    headers,
    defaultParams: {
        intentCustomerId: Number(query.intentCustomerId || 0),
        status: 2
    }
});

</script>

<template>
    <Page>
        <div class="m-3">
            <nut-cell-group title="付款信息">
                <nut-cell title="客户">
                    <template #desc>
                        <span class="text-black"> {{ data?.customerName }}</span>
                    </template>
                </nut-cell>

                <nut-cell title="单号">
                    <template #desc>
                        <span class="text-black"> {{ data?.billNo }}</span>
                    </template>
                </nut-cell>

                <nut-cell title="付款阶段">
                    <template #desc>
                        <span class="text-black"> {{ data?.summary }}</span>
                    </template>
                </nut-cell>

                <nut-cell title="金额">
                    <template #desc>
                        <span class="text-black">¥{{ data?.totalAmount }}</span>
                    </template>
                </nut-cell>
            </nut-cell-group>

            <div v-if="data" class="w-2/3 mx-auto mt-4">
                <nut-button block type="success" size="large" :loading="loading"
                            @click="run({ receiptBillId: data.receiptBillId })">去付款</nut-button>
            </div>
        </div>


        <div class="mt-5 text-sm text-#999 px-3">历史记录</div>

        <div v-if="listData?.list?.length < 1" class="py-10 text-center text-#999 text-sm">暂无数据</div>
        <Record v-for="item in listData?.list" :key="item.billNo" :source="item" />
    </Page>

</template>